import React, { Component }  from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import moment from 'moment';
import { Modal, Form, Input, Tooltip, Icon } from 'antd';
import { CommonTable } from 'components';
import { feedbackMangeAction } from "./index";
import SearchList  from './SearchList/SearchList';
import styles from './FeedbackManage.less';
import { axios } from 'utils';

const FormItem = Form.Item;

const convertParams = (obj = {}) => {
    const { time = [], deviceModel = '', typeName = '', phoneNo = '' } = obj;
    const isArr = Array.isArray(time) && time.length > 0;

    return {
        startTime: isArr ? time[0].format('YYYY-MM-DD 00:00:00') : '',
        endTime: isArr ? time[1].format('YYYY-MM-DD 23:59:59') : '',
        deviceModel,
        typeName,
        phoneNo
    };
}


class Manage extends Component{

    constructor(props) {
        super(props);
        this.state = {
            isShowImg: false,
            imgUrl: '',
            reply: false,
            fbId: '',
        };
        this.pageSize = 10;
        this.searchParams = convertParams();
        const _this = this;
        this.columns = [
            {
                title: '反馈时间',
                dataIndex: 'addTime',
                key: 'addTime',
                width: '180px',
                render(text) {
                    return moment(Number(text) * 1000).format('YYYY-MM-DD HH:mm:ss');
                }
            },
            { title: '手机号', dataIndex: 'phoneNo', key: 'phoneNo',width: '150px' },
            { title: '客户端', dataIndex: 'deviceModel', key: 'deviceModel' },
            { title: '版本号', dataIndex: 'version', key: 'version' },
            { title: '问题类型', dataIndex: 'type', key: 'type' },
            { title: '联系方式', dataIndex: 'qq', key: 'qq' },
            { title: '反馈内容', dataIndex: 'remark', key: 'remark',width: '40%' },
            {
                title: '图片',
                dataIndex: 'imgUrl',
                key: 'imgUrl',
                render(text) {
                    if(!text){
                        return '';
                    }
                    const arr = text.split(',');
                    return arr.map((item, index) => <img onClick={() => _this.showImg(item)} style={{ margin: '0 10px', cursor: 'pointer' }} key={index} src={item} width={'30px'}/>);
                }
            },
            {
                title: '操作',
                dataIndex: 'id',
                key: 'id',
                render(text, record) {
                    return (
                        <div className={styles.recordWrapper}>
                            <Tooltip title={"回复意见反馈"}>
                                <span onClick={() => _this.showModal(text)}><Icon type={'plus'}/></span>
                            </Tooltip>
                        </div>
                    );
                }
            }
        ];
    }

    showImg = (item) => {
        this.setState({
            imgUrl: item
        }, () => {
            this.setState({
                isShowImg: true
            });
        });
    }

    showModal = (id) => {
        this.setState({
            reply: true,
            fbId: id,
        })
    }

    submitReply = (e) => {
        e.preventDefault();
        const { form: { getFieldsValue } } = this.props;
        const message = getFieldsValue();
        const info = message && message.info ? message.info : ''
        const _this = this;
        axios({
            url: '/hs/admin/feedback/answerFeedBack',
            method: 'post',
            data: {
                fbId: _this.state.fbId,
                info
            }
        }).then((res) => {
            if(res) {
                console.log(res);
                _this.setState({
                    reply: false,
                    fbId: '',
                })
            }
        })
    }

    onCancel = () => {
        this.setState({
            reply: false,
            fbId: '',
        })
    }

    handlePageChange = (info) => {
        const {current, pageSize} = info;
        const {getTableData} = this.props;
        getTableData({pageSize, pageNum: current, ...this.searchParams});
    }


    submit = (obj) => {
        const params = convertParams(obj);
        this.searchParams = params;
        const { getTableData } = this.props;
        getTableData({ pageSize: this.pageSize, pageNum: 1, ...this.searchParams });
    }
    componentDidMount() {
        const { getTableData, getTypeData } = this.props;
        getTableData({ pageSize: this.pageSize, pageNum: 1 });
        getTypeData({ });
    }

    render() {
         const { tableData: { data, pagination }, loading, typeData } = this.props;
         const { form: { getFieldDecorator  }  } = this.props;
        return (
            <div>
                <SearchList submit={this.submit} typeData={typeData}/>
                <CommonTable
                    handlePageChange={this.handlePageChange}
                    columns={this.columns}
                    dataSource={data}
                    pagination={pagination}
                    loading={loading}
                />
                <Modal
                    onCancel={() => {this.setState({ isShowImg: false })}}
                    width={600}
                    visible={this.state.isShowImg}
                    footer={null}
                    title={'查看图片'}
                >
                    <div style={{ textAlign: 'center' }}>
                        <img width={'500px'} src={this.state.imgUrl}/>
                    </div>
                </Modal>
                <Modal
                    title="回复意见反馈"
                    visible={this.state.reply}
                    onOk={this.submitReply}
                    onCancel={this.onCancel}
                    >
                    <Form onSubmit={this.submitReply}>
                        <FormItem>
                            {
                                getFieldDecorator('info', {
                                    initialValue: ''
                                })(
                                    <Input placeholder={'请回复意见反馈'}/>
                                )
                            }
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        );

    }
}
const FeedbackManage =  Form.create({
    mapPropsToFields(props){
        const { info } = props;
        return {
            info: Form.createFormField({
                value: info
            })
        }
    }
})(Manage);

const mapStateToProps = (state) => {
    const { systemManageState: { feedbackManageState } } = state;
    return {
        tableData: feedbackManageState['tableData'],
        loading: feedbackManageState['loading'],
        typeData: feedbackManageState['typeData']
    };
};
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: feedbackMangeAction.fbmGetTableData,
        setTableData: feedbackMangeAction.fbmSetTableData,
        getTypeData: feedbackMangeAction.fbmGetTypeData
    }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(FeedbackManage);